import htmlDocx from "html-docx-js/dist/html-docx";
import { ElMessage } from "element-plus";

/**
 * 提取元素的关键样式并转换为内联样式
 * @param {HTMLElement} element 目标元素
 */
function extractCriticalStyles(element) {
  const computedStyle = window.getComputedStyle(element);

  // 只提取对文档显示至关重要的样式（docx支持度较高的）
  const criticalStyles = [
    "color",
    "font-size",
    "font-weight",
    "font-style",
    "text-align",
    "margin",
    "margin-top",
    "margin-bottom",
    "margin-left",
    "margin-right",
    "padding",
    "padding-top",
    "padding-bottom",
    "padding-left",
    "padding-right",
    "border",
    "border-style",
    "border-width",
    "border-color",
    "background-color",
    "line-height",
    "list-style-type",
    "text-indent",
  ];

  let styleText = "";
  criticalStyles.forEach((prop) => {
    const value = computedStyle.getPropertyValue(prop);
    if (value && value !== "auto" && value !== "none") {
      styleText += `${prop}: ${value}; `;
    }
  });

  // 保留原有的内联样式
  const originalStyle = element.getAttribute("style") || "";
  element.setAttribute("style", originalStyle + "; " + styleText);

  // 递归处理子元素
  Array.from(element.children).forEach((child) => {
    extractCriticalStyles(child);
  });
}

/**
 * 导出 HTML 内容为 DOCX 文件（优化样式处理）
 * @param {HTMLElement} contentRef - 包含导出内容的 DOM 元素
 * @param {string} fileName - 导出的文件名
 */
export function exportHtmlToDocx(contentRef, fileName = "文档导出.docx") {
  if (!contentRef || !(contentRef instanceof HTMLElement)) {
    ElMessage.error("导出失败：未找到有效的内容区域");
    return;
  }

  try {
    // 1. 克隆原始元素（避免修改原DOM）
    const clone = contentRef.cloneNode(true);

    // 2. 提取关键样式并应用为内联样式
    extractCriticalStyles(clone);

    // 3. 提取页面中所有相关的样式表（用于补充）
    let stylesheets = "";
    Array.from(document.styleSheets).forEach((sheet) => {
      try {
        Array.from(sheet.cssRules).forEach((rule) => {
          stylesheets += rule.cssText + "\n";
        });
      } catch (e) {
        // 忽略跨域样式表的错误
      }
    });

    // 4. 构建完整的HTML内容（结合内联样式和外部样式）
    const htmlContent = `
      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="UTF-8">
          <style>
            /* 基础重置样式 */
            * { box-sizing: border-box; }
            body { margin: 0; padding: 0; }
            /* 引入页面原始样式表 */
            ${stylesheets}
          </style>
        </head>
        <body>
          ${clone.outerHTML}
        </body>
      </html>
    `;

    // 5. 转换并下载
    const docxBlob = htmlDocx.asBlob(htmlContent);
    const url = URL.createObjectURL(docxBlob);
    const a = document.createElement("a");
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();

    // 清理资源
    setTimeout(() => {
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    }, 100);

    ElMessage.success("DOCX 导出成功！");
  } catch (error) {
    console.error("导出失败：", error);
    ElMessage.error(`导出失败：${error.message}`);
  }
}
